<template>
  <div>
    <Card dis-hover :bordered="false">
      <Tabs type="card" v-model="munname" @on-click="changeTab">
        <TabPane name="name1" label="营销费用">
          <marketingCosts ref="marketingcosts"></marketingCosts>
        </TabPane>
        <TabPane name="name2" label="基建费用">
          <capitalCosts ref="capitalcosts"></capitalCosts>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>
<script>
import marketingCosts from "./components/marketingCosts.vue"; // 营销费用

import capitalCosts from "./components/capitalCosts.vue"; // 基建费用

export default {
  name: "consumerEntry",
  components: {
    marketingCosts,
    capitalCosts,
  },
  data() {
    return {
      munname: "name1",
    };
  },
  mounted() {
    this.$refs.marketingcosts.initial(this.munname);
  },
  methods: {
    changeTab(e) {
      if (e == "name1") {
        this.$refs.marketingcosts.initial(e);
      } else {
        this.$refs.capitalcosts.initial(e);
      }
    },
  },
};
</script>
<style>
.ivu-sidebar span {
  cursor: pointer;
}

.ivu-active {
  font-weight: bold;
  color: #55b6ec;
}
</style>
>
